[ContextualSaveBar] Add support for custom `saveAction` #10249

chloerice · 2023-08-25T21:01:57Z

Note

This PR should not be shipped until the context bar redesign ships and we know whether or not this is still necessary to support.

WHY are these changes introduced?

Fixes https://github.com/Shopify/polaris-internal/issues/1376

ContextualSaveBar doesn't accept a ReactNode for saveAction right now, so the improved API for split buttons shipped in #10182 can't be implemented in it.

WHAT is this pull request doing?

This PR:

Adds support for setting JSX on the saveAction prop
Removes unneeded overrides of Button color properties to invert the ContextualSaveBar saveAction
Updates the "With custom primary action" of Page example to a realistic admin use case (the split button)

How to 🎩

🖥 Local development instructions
🗒 General tophatting guidelines
📄 Changelog guidelines

Copy-paste this code in playground/Playground.tsx:

import React from 'react';
import {Page} from '../src';

export function Playground() {
  return (
    <Page title="Playground">
      {/* Add the code you want to test in here */}
    </Page>
  );
}

🎩 checklist

Tested on mobile
Tested on multiple browsers
Tested for accessibility
Updated the component's README.md with documentation changes
Tophatted documentation changes in the style guide

chloerice · 2023-08-25T21:31:45Z

polaris-react/src/components/Button/Button.scss

-    &:active svg,
-    &.pressed svg {
-      fill: var(--p-color-icon-critical-strong-active-experimental);
-    }
+  &:hover {
+    // stylelint-disable-next-line -- Button custom properties
+    --pc-button-icon-color: var(
+      --p-color-icon-critical-strong-hover-experimental
+    );
+  }

-    &.disabled svg {
-      fill: var(--p-color-icon-disabled);
-    }


The two declarations were duplicates once the unneeded svg tag is removed from it, so the custom property is set at the top of the equivalent class' declarations on 606 and 664.

chloerice · 2023-08-25T21:32:14Z

polaris-react/src/components/Button/Button.scss

+    // stylelint-disable-next-line -- Button custom properties
+    --pc-button-icon-color: var(
+      --p-color-icon-critical-strong-active-experimental
+    );


See https://github.com/Shopify/polaris/pull/10249/files#r1306165048

chloerice · 2023-08-25T21:32:27Z

polaris-react/src/components/Button/Button.scss

+    // stylelint-disable-next-line -- Button custom properties
+    --pc-button-icon-color: var(--p-color-icon-disabled);


See https://github.com/Shopify/polaris/pull/10249/files#r1306165048

chloerice · 2023-08-25T21:34:24Z

polaris-react/src/utilities/frame/types.ts

@@ -40,7 +40,7 @@ export interface ContextualSaveBarProps {
  /** Accepts a string of content that will be rendered to the left of the actions */
  message?: string;
  /** Save or commit contextual save bar action with text defaulting to 'Save' */
-  saveAction?: ContextualSaveBarAction;
+  saveAction?: ContextualSaveBarAction | React.JSX.Element;


(ReactNode is too wide of a net so this is more specific, as we only want to accept JSX elements not strings etc)

chloerice · 2023-08-25T21:56:12Z

documentation/guides/migrating-from-v11-to-v12.md

+- [Migrating from v11 to v12](#migrating-from-v11-to-v12)
+  - [Table of Contents](#table-of-contents)
+  - [Quick migration guide](#quick-migration-guide)


This happens automatically no matter what extension I disable 😤

chloerice · 2023-08-25T21:57:23Z

polaris-react/src/components/Button/Button.scss

+  svg {
+    // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
+    fill: var(--pc-button-icon-color);
+  }


Instead of this being declared over and over again, it's now declared once and the custom property is set in the class and interaction state declarations instead.

lgriffee · 2024-01-11T17:22:23Z

@chloerice Is this still being worked on? Or is this work now a part of the overlay patterns project?

chloerice · 2024-01-19T22:52:05Z

Yes, I'll jump back into this Monday! I'd held off on it because I was updating the way we handle SVG fill in Button (nerd-sniped 😅) and wanted to split that out. Sam did this in the Button refactor, so I can just clean this branch up to only the CSB changes 🚀

lgriffee · 2024-01-22T22:24:29Z

@chloerice Awesome, thanks so much Chloe! Also just wanted to let you know I created an accompanying issue for this PR since I got a request to remove any PRs from our project board. Feel free to edit the issue if needed!

sophschneider · 2024-02-27T19:25:52Z

is it possible to hold off on this until we redesign the CSB? it might be harder for us to move/override the CSB save if we don't know for sure that it is a button.

We're also introducing a new button style so not sure how it would work for the connected disclosure. Is this needed somewhere in the admin right now?

chloerice · 2024-02-29T14:48:55Z

is it possible to hold off on this until we redesign the CSB? it might be harder for us to move/override the CSB save if we don't know for sure that it is a button.

Yes, this totally makes sense to hold off on 💯 Moved to Icebox and noted in description!

We're also introducing a new button style so not sure how it would work for the connected disclosure. Is this needed somewhere in the admin right now?

@sophschneider No, not that I'm aware of 👀 It was just a regression of support when we removed the connectedDisclosure prop so I put a PR so I wouldn't forget as we were doing v12 migrations 😅

chloerice added the #gsd:36573 Polaris API Alignment label Aug 25, 2023

chloerice changed the base branch from main to next August 25, 2023 21:14

chloerice force-pushed the csb-custom-save-action branch from adcb04e to bd34872 Compare August 25, 2023 21:20

chloerice commented Aug 25, 2023

View reviewed changes

chloerice force-pushed the csb-custom-save-action branch 4 times, most recently from 060c785 to 3b3f0d0 Compare August 25, 2023 21:54

chloerice commented Aug 25, 2023

View reviewed changes

chloerice added 🤖Skip Major Check next Track all things related to next major release 🤖Skip Comment Check Skip the migrator comment CI check labels Aug 25, 2023

chloerice force-pushed the csb-custom-save-action branch from 22b17e2 to 3bbebd5 Compare August 30, 2023 18:28

chloerice self-assigned this Sep 19, 2023

sophschneider force-pushed the next branch 2 times, most recently from 9cc8232 to 48ca178 Compare September 27, 2023 17:40

Base automatically changed from next to main October 9, 2023 03:02

alex-page added #gsd:37811 and removed #gsd:36573 Polaris API Alignment labels Dec 4, 2023

lgriffee added #gsd:38846 Admin Quality Improvements (Q1 2024) Priority: Low Small, subtle details labels Jan 12, 2024

lgriffee removed the #gsd:37811 label Jan 22, 2024

chloerice force-pushed the csb-custom-save-action branch from 3bbebd5 to d0c0b7c Compare February 26, 2024 22:57

chloerice force-pushed the csb-custom-save-action branch from d0c0b7c to 0821a3c Compare February 26, 2024 23:01

chloerice marked this pull request as ready for review February 26, 2024 23:03

chloerice requested a review from sophschneider February 26, 2024 23:03

chloerice removed 🤖Skip Comment Check Skip the migrator comment CI check 🤖Skip Major Check next Track all things related to next major release labels Feb 26, 2024

chloerice force-pushed the csb-custom-save-action branch from 0821a3c to 5aeb04e Compare February 26, 2024 23:10

[ContextualSaveBar] Add support for custom saveAction markup

6a517e9

chloerice force-pushed the csb-custom-save-action branch from 5aeb04e to f690f9a Compare February 26, 2024 23:20

chloerice marked this pull request as draft February 29, 2024 14:49

chloerice removed the request for review from sophschneider February 29, 2024 14:49

chloerice removed the #gsd:38846 Admin Quality Improvements (Q1 2024) label Feb 29, 2024

aaronccasanova force-pushed the csb-custom-save-action branch from f690f9a to 6a517e9 Compare April 19, 2024 21:52

github-actions bot added the cla-needed Added by a bot. Contributor needs to sign the CLA Agreement. label Apr 19, 2024

aaronccasanova force-pushed the main branch from 9f6fc03 to b71eff5 Compare April 20, 2024 02:33

chloerice closed this Oct 31, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[ContextualSaveBar] Add support for custom `saveAction` #10249

[ContextualSaveBar] Add support for custom `saveAction` #10249

chloerice commented Aug 25, 2023 •

edited

Loading

chloerice Aug 25, 2023

chloerice Feb 27, 2024

chloerice Aug 25, 2023

chloerice Feb 27, 2024

chloerice Aug 25, 2023

chloerice Feb 27, 2024

chloerice Aug 25, 2023

chloerice Aug 25, 2023

chloerice Feb 27, 2024

chloerice Aug 25, 2023 •

edited

Loading

chloerice Feb 27, 2024

lgriffee commented Jan 11, 2024

chloerice commented Jan 19, 2024

lgriffee commented Jan 22, 2024

sophschneider commented Feb 27, 2024 •

edited

Loading

chloerice commented Feb 29, 2024 •

edited

Loading

		// stylelint-disable-next-line -- Button custom properties
		--pc-button-icon-color: var(--p-color-icon-disabled);

[ContextualSaveBar] Add support for custom saveAction #10249

[ContextualSaveBar] Add support for custom saveAction #10249

Conversation

chloerice commented Aug 25, 2023 • edited Loading

Note

WHY are these changes introduced?

WHAT is this pull request doing?

How to 🎩

🎩 checklist

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

chloerice Aug 25, 2023 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

lgriffee commented Jan 11, 2024

chloerice commented Jan 19, 2024

lgriffee commented Jan 22, 2024

sophschneider commented Feb 27, 2024 • edited Loading

chloerice commented Feb 29, 2024 • edited Loading

[ContextualSaveBar] Add support for custom `saveAction` #10249

[ContextualSaveBar] Add support for custom `saveAction` #10249

chloerice commented Aug 25, 2023 •

edited

Loading

chloerice Aug 25, 2023 •

edited

Loading

sophschneider commented Feb 27, 2024 •

edited

Loading

chloerice commented Feb 29, 2024 •

edited

Loading